<script lang="ts" setup>
  import { GameScheduleItem } from '@/types/game';
  import { onMounted, ref, watch } from 'vue';
  import _ from 'lodash';

  const props = defineProps<{
    modelValue?: GameScheduleItem[];
  }>();

  const emit = defineEmits(['update:modelValue']);

  const list = ref<GameScheduleItem[]>([]);

  watch(
    [list],
    () => {
      emit('update:modelValue', list.value);
    },
    {
      deep: true,
    }
  );

  const addItem = () => {
    list.value.push({
      range: [],
      content: '',
    });
  };

  const removeItem = (index: number) => {
    list.value.splice(index, 1);
  };

  onMounted(() => {
    if (props.modelValue) {
      list.value = _.cloneDeep(props.modelValue);
    }
  });
</script>

<template>
  <div class="container">
    <a-row :gutter="[12, 12]">
      <a-col v-for="(item, index) in list" :key="index" :span="8">
        <div class="item">
          <a-form-item
            hide-label
            :field="`scheduleList[${index}].range`"
            :rules="[{ required: true, message: '不能为空' }]"
          >
            <a-time-picker
              v-model="item.range"
              format="HH:mm"
              type="time-range"
              style="width: 200px"
            />
          </a-form-item>

          <a-form-item
            hide-label
            :field="`scheduleList[${index}].content`"
            :rules="[{ required: true, message: '不能为空' }]"
          >
            <a-input v-model="item.content" />
          </a-form-item>

          <a class="remove" @click="removeItem(index)">
            <icon-close-circle-fill />
          </a>
        </div>
      </a-col>
      <a-col :span="8">
        <div class="add" @click="addItem"> <icon-plus />添加日程 </div>
      </a-col>
    </a-row>
  </div>
</template>

<style lang="less" scoped>
  .item {
    padding: 12px;
    border: 1px solid var(--color-border-2);
    border-radius: 3px;
    margin-bottom: 12px;
    position: relative;
  }
  .remove {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 10;
    color: rgb(var(--red-6));
    font-size: 18px;
    cursor: pointer;
    &:hover {
      color: rgb(var(--red-7));
    }
  }
  .add {
    border-radius: 3px;
    cursor: pointer;
    line-height: 128px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--color-border-2);
    color: var(--color-text-3);
    &:hover {
      color: rgb(var(--primary-6));
      border-color: rgb(var(--primary-6));
    }
  }
</style>
